<template>
  <div class="container" ref="container">
    <div>
      <!--hot-->
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li class="hot-item" v-for="item in hotCities" :key="item.id" @click="changeCityName(item.name)">
            {{item.name}}
          </li>
        </ul>
      </div>

      <!--sort-->
      <div class="sort">
        <div class="sort-title">字母排序</div>
        <ul class="sort-list">
          <li class="sort-item" v-for="(item,key) in cities" @click="changeSort(key)">
            {{key}}
          </li>
        </ul>
      </div>

      <!--list-->
      <div class="list">
        <div v-for="(val, key) in cities" :key="val.key" :ref="key">
          <div class="list-title">{{key}}</div>
          <ul class="list-msg">
            <li class="list-item" v-for="item in val" :key="item.id" @click="changeCityName(item.name)">
              {{item.name}}
            </li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import { mapMutations } from 'vuex'

  export default {
    name: "Hot",
    props: ['cities','hotCities'],
    data(){
      return{
        scroll: ''
      }
    },
    mounted() {
      let container = this.$refs['container'];
      this.scroll = new BScroll(container)
    },
    methods: {
      changeSort(sortName){
        // console.log(sortName)
        // console.log(this.$refs[sortName])
        this.scroll.scrollToElement(this.$refs[sortName][0])
      },
      changeCityName(cityName){
        this.changeCity(cityName);
        this.$router.push('/')
      },
      ...mapMutations(['changeCity'])
    },
  }
</script>

<style scoped lang="stylus">
  @import '~css/common.styl'

  .container{
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    bottom: 0;
    top: .88rem;
    background:#f5f5f5;
  }

  .hot-title{
    font-size: .24rem;
    padding: .2rem .3rem;
    color: #212121;
  }
  .hot-list{
    background: #fff;
    font-size: .28rem;
    position: relative;
    overflow: hidden;
    color: #212121;
  }
  .hot-list:before{
    content: "";
    position:absolute;
    height: 100%;
    width: 33.33%;
    left: 33.33%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;
  }
  .hot-item{
    width: 33.333%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    border-bottom: .02rem solid #ddd;
    position: relative;
  }
  .sort-title{
    font-size: .24rem;
    padding: .2rem .3rem;
    color: #212121;
  }
  .sort-list{
    background: #fff;
    font-size: .24rem;
    position: relative;
    overflow: hidden;
    color: #212121;
  }
  .sort-item{
    width:16%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
  }

  .list-title{
    font-size: .24rem;
    padding: .2rem .3rem;
    color: #212121;
  }
  .list-msg{
      position: relative;
      background: #fff;
      overflow: hidden;
    }
  .list-msg:before {
    content: "";
    position: absolute;
    left: 25%;
    width: 25%;
    height: 100%;
    border-left: .02rem solid #ddd;
    border-right: .02rem solid #ddd;
  }
  .list-msg:after {
    content: "";
    position: absolute;
    width: 0%;
    left: 75%;
    height: 100%;
    border-left: .02rem solid #ddd;
  }
  .list-item{
    position: relative;
    width: 25%;
    text-align: center;
    height: .9rem;
    line-height: .9rem;
    float: left;
    font-size: .28rem;
    border-bottom:.02rem solid #ddd;
    textOverflow();
  }
</style>
